<template>
    <section>

        <el-col :sm="24" :lg="24"> 
            
        <!-- <div class="grid-content bg-purple" :style="{backgroundColor:titleColor}">
            <div class="dev-title">组织信息</div>
        </div> -->
        <!-- 组织信息模块 -->
        <!-- <div class="col-bg" style="padding: 12px 15px;margin-bottom: 0;display: flex;"> -->
        <div class="col-bg" style="padding: 20px;margin-bottom: 0;display: flex;border-radius: 6px;">
            <div class="group-border" style="width: 15%;text-align: center;display: flex;align-items: center;justify-content: center;">
                <img style="width: 113px;height: 110px;" :src="imageUrl?imageUrl:require('../../assets/1554284055.jpg')" />
            </div>
            <div style="width: 85%;">
                <div class="group-border" style="font-size: 18px;padding: 10px 20px;background-color: #FAFAFA;display: flex;justify-content: space-between;align-items: center;">
                    <span>{{detailsShow.name}}</span> 
                    <span style="display: flex;cursor: pointer;" @click="editcompany()">
                        <img style="display: inline-block;width: 20px;height: 20px;" src="../../assets/icon/编辑icon@2x.png" alt="" />
                        <span style="font-size: 14px;color: #507AFD;">编辑</span>
                    </span> 
                </div>
                <div style="display: flex;">
                    <div class="group-border group-title">电话号码：</div>
                    <div class="group-border group-text">{{detailsShow.phone}}</div>
                    <div class="group-border group-title">地址：</div>
                    <div class="group-border group-text">{{detailsShow.address}}</div>
                    <div class="group-border group-title">网址：</div>
                    <div class="group-border group-text">{{detailsShow.site}}</div>
                    <!-- <div class="group-border group-title">萤石云名称：</div>
                    <div class="group-border group-text" style="width: 23%;">{{detailsShow.videoAccount}}</div> -->
                </div>
                <div style="display: flex;">
                    
                    <div class="group-border group-title">备注：</div>
                    <div class="group-border group-text">{{detailsShow.remark}}</div>
                    <div class="group-border group-title">客户关系图：</div>
                    <div class="group-border group-text" style="width: 23%;">
                       <span style="color:#507AFD;cursor: pointer;" @click="dendrogram">点击查看</span> 
                    </div>
                </div>
            </div>
                <!-- <el-col :span="12">
                    <div class="device_imgs"> <img :src="imageUrl?imageUrl:require('../../assets/1554284055.jpg')"></div>
                </el-col>
                <el-col :span="12">
                    <div class="device_p">
                        <div class="device_title">
                            <i class="ng-binding">{{detailsShow.name}}</i>
                            <i  title="编辑" icon="el-icon-edit" circle class="pb-icon icon-edit" style='vertical-align:top;' @click="editcompany()"></i>
                    </div>
                        <p class="ng-binding"><label class="ng-binding">平台名称：{{detailsShow.title}}</label></p>
                        <p class="ng-binding"><label class="ng-binding">电话号码：{{detailsShow.phone}}</label></p>
                        <p class="ng-binding"><label class="ng-binding">地址：{{detailsShow.address}}</label></p>
                        <p class="ng-binding"><label class="ng-binding">萤石云名称：{{detailsShow.videoAccount}}</label></p>
                        <p class="ng-binding"><label class="ng-binding">网址:{{detailsShow.site}}</label></p>
                        <p class="ng-binding"><label class="ng-binding">备注:{{detailsShow.remark}}</label></p>
                        <p class="ng-binding"><label class="ng-binding">过期时间:{{detailsShow.expirationTime}}</label></p>
                        <el-button :type="buttonColor" style="margin-bottom:10px;" @click="dendrogram">客户关系图</el-button>
                    </div>
                </el-col> -->
        </div>
    </el-col>
        <!-- 员工列表 -->
        <el-col  class="col-bg" :md="24" style="margin-top: 20px;border-radius: 6px;">    
            <el-form :inline="true" :model="filters">
                <el-form-item style="float: left;">
                    <span class="userlists" >员工列表</span>
                </el-form-item>
                <el-form-item style="float: left;">
                    <el-input v-model="filters.name" placeholder="用户名" @keyup.enter.native="getStaff()"></el-input>
                </el-form-item>
                <el-form-item style="float: left;">
                    <el-input v-model="filters.phone" placeholder="电话号码" @keyup.enter.native="getStaff()"></el-input>
                </el-form-item>
                <el-form-item class="tool-bt">
                    <el-button :type="buttonColor" v-on:click="getStaff">查询</el-button>
                </el-form-item>
                <el-form-item v-if="menubt.indexOf('/role/post')>-1">
                    <el-button :type="buttonColor" style="margin-bottom:10px;" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
                <!-- <el-button :type="buttonColor" style="margin-bottom:10px;" @click="handleAdd">新增</el-button> -->
                
            <el-table :data="userlist" class="alarmshistory" :header-row-style="{backgroundColor:titleColor}" max-height="700" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;padding:0">
                    <!-- <el-table-column type="selection">
                    </el-table-column> -->
                    <el-table-column align="center" type="index" label="序号"  width="80" :index="indexMethod">
                    </el-table-column>
                    <el-table-column align="center" prop="userName" label="用户名">
                    </el-table-column>
                    <el-table-column align="center" prop="nickName" label="昵称">
                    </el-table-column>    
                    <el-table-column align="center" prop="createTime" label="注册时间">
                    </el-table-column>
                    <el-table-column align="center" prop="email" label="邮箱">
                    </el-table-column>
                    <el-table-column align="center" prop="phone" label="电话号码">
                    </el-table-column>
                    <el-table-column align="center" prop="company.name" label="所属组织">
                    </el-table-column>
                    <el-table-column align="center" prop="authTypeName" label="用户属性">
                    </el-table-column>                                                                                                                
                    <el-table-column align="center" label="当前状态">
                        <template scope="scope">
                            <span v-if="scope.row.status==1">
                                <img style="width: 14px;height: 14px;vertical-align: middle;" src="../../assets/icon/已停用icon@2x.png" alt="" />
                                <span style="color:#FF5959;">已停用</span> 
                            </span>
                            <span v-if="scope.row.status==2">
                                <img style="width: 14px;height: 14px;vertical-align: middle;" src="../../assets/icon/已启用icon@2x.png" alt="" />
                                <span style="color:#4AC936;">已启用</span> 
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="状态操作">
                    <template scope="scope">
                        <el-switch v-model="scope.row.status" :active-value="2" :inactive-value="1" active-color="#4AC936" inactive-color="#FF5959" @change="stateput(scope.row)"></el-switch>
                        <!-- <el-button v-if="scope.row.status==2" size="small" @click="stateput( scope.row)"
                            type="small" plain>停用</el-button>
                        <el-button v-if="scope.row.status==1" size="small" :type="buttonColor"
                            @click="stateput( scope.row)" plain>启用</el-button> -->
                    </template>
                    </el-table-column>
                    <el-table-column align="center" v-if="custom_version!=1" label="登录地址" width="200">
                        <template scope="scope">
                            <!-- <div style="width:60px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis" :title="scope.row.address">{{scope.row.address}}</div> -->
                            <div>{{scope.row.address}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="角色">
                    <template scope="scope">
                        <el-button  size="small" @click="exentEdit(scope.$index, scope.row)">关联角色</el-button>
                    </template>
                    </el-table-column>
                    <el-table-column v-show="user.authType=0" align="center" label="操作" fixed="right">
                        <template scope="scope">
                            <i @click="handleEdit(scope.$index, scope.row)" v-show='scope.row.userId!=user.userId'  title="编辑" icon="el-icon-edit" circle class="pb-icon icon-edit"></i>
                            <i @click="handleDel(scope.$index, scope.row)"  v-show="scope.row.authType!=0" icon="el-icon-delete" circle title="删除" class="pb-icon icon-delete"></i>

                        </template>
                    </el-table-column>
                </el-table>              
                <!--工具条-->
            <el-col :span="24" class="toolbar">
                <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange"   @size-change="handleSizeChange" :page-size="10" :total="total"
                    style="float:right;">
                </el-pagination>
            </el-col>
        </el-col>
            

            <!-- 修改界面 -->
            <el-dialog title="编辑" v-show="editMycompany" :custom-class="dialogTitleColor" @close="editMycompany = false">
                 <div slot="footer" style="text-align: left; ">
                    <el-form ref="form" :rules="edituser" :model="form" label-width="130px" @submit.prevent="onSubmit">
                    <!-- <el-form-item label="平台名称" prop="title">
                        <el-input :disabled="menubt.indexOf('/company/edit_plt_name')==-1" v-model="form.title" auto-complete="off"></el-input>
                    </el-form-item> -->
                    <div class="profile-edit-group">
                        <el-form-item label="组织名" prop="name">
                            <el-input v-model="form.name" auto-complete="off"></el-input>
                        </el-form-item>
                    </div>
                    <div class="profile-edit-group">
                        <el-form-item label="电话号码" prop="phone">
                            <el-input v-model="form.phone" auto-complete="off"></el-input>
                        </el-form-item>
                    </div>
                    <!-- <div class="profile-edit-group">
                        <el-form-item label="工作时间（上午）">
                            <el-time-picker is-range v-model="morningtime" range-separator="至" value-format="HH:mm:ss" start-placeholder="上班时间" end-placeholder="下班时间" placeholder="选择时间范围"></el-time-picker>
                        </el-form-item>
                    </div>
                    <div class="profile-edit-group">
                        <el-form-item label="工作时间（下午）">
                            <el-time-picker is-range v-model="afternoontime" range-separator="至" value-format="HH:mm:ss" start-placeholder="上班时间" end-placeholder="下班时间" placeholder="选择时间范围"></el-time-picker>
                        </el-form-item>
                    </div> -->

                    <!-- <el-form-item label="上班时间">
                        <el-input v-model="form.phone" auto-complete="off"></el-input>
                    </el-form-item> -->
                    <!-- <el-form-item  label="萤石云账号">
                        <el-col :span="10" style="margin-bottom:10px;">
                            <el-input v-model="videoAccount.video[0].name"  placeholder="名称"></el-input>
                        </el-col>
                        <el-col :span="10" style="margin-bottom:10px;margin-left:10px">
                            <el-input v-model="videoAccount.video[0].app_key"  placeholder="app_key"></el-input>
                        </el-col>
                        <el-col :span="21" style="margin-bottom:10px;">
                            <el-input v-model="videoAccount.video[0].app_secret"  placeholder="app_secret"></el-input>
                        </el-col>
                    </el-form-item> -->

                    <el-form-item v-show="form.expirationTime" label="过期时间">
                        <!-- <el-radio v-model="form.expirationStatus" :label="1" @change="second2()">永不过期</el-radio>
                        <el-radio v-model="form.expirationStatus" :label="0">选择日期</el-radio> -->
                        <!-- <el-date-picker v-show="form.expirationStatus == 0" v-model="value1" type="datetime" placeholder="选择日期时间" @change="second1()">
                        </el-date-picker> -->
                        <el-input v-model="form.expirationTime" :disabled="true"></el-input>
                    </el-form-item>
                    <div class="profile-edit-group">
                        <el-form-item label="网址">
                            <el-input v-model="form.site" auto-complete="off"></el-input>
                        </el-form-item>
                    </div>
                    <div class="profile-edit-group">
                        <el-form-item label="备注" prop="remark">
                            <!-- <el-input type="textarea" v-model="form.remark"></el-input> -->
                            <el-input v-model="form.remark" auto-complete="off"></el-input>
                        </el-form-item>
                    </div>
                    <el-form-item label="图片">
                        <el-upload class="avatar-uploader" :headers="fileList" action="/api/auth/image_file/upload"
                            :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="地址">
                        <div id="allmap" ref="allmap"></div>
                        <!-- <div style="position: absolute;right: -18%;top: 1%;">
                            <el-button :type="buttonColor" size="mini" @click="drawRange">设置围栏</el-button>
                        </div>
                        <div style="font-size: 12px;color: #a7a7a7;width: 820px;">
                            <div style="display: flex;">
                                <span>选择围栏颜色：</span>
                                <span class="colorsel" v-for="item in colorlist" :key="item.id" :style="{background: item.color}" @click="changeColor(item.color)"></span>
                            </div>
                            <div>
                                提示：点击“设置围栏”后在地图上点击选择范围，双击鼠标左键结束设置
                            </div>
                        </div> -->
                        <div class="map_position clearfix ng-binding" style="width: 92%;margin: 0;">
                            <el-input type="text" id="suggestId" placeholder="请输入公司地址" v-model="form.address" class="input_style"></el-input>
                            <!-- 经度：{{form.longitude}},纬度：{{form.latitude}} -->
                        </div>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer" style="text-align:right;margin-right:30px;">
                        <el-button :type="buttonColor" @click.native="onSubmit" :loading="editLoading">提交</el-button>
                    </div>
                 </div>
            </el-dialog>
        

         <!--编辑界面-->
        <el-dialog title="编辑" v-show="editFormVisible" v-model="editFormVisible" :custom-class="dialogTitleColor" @close="editFormVisible=false">
            <div slot="footer" style="text-align: left; ">
                <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
                    <el-form-item label="用户名" prop="userName">
                        <el-input v-model="editForm.userName" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称" prop="nickName">
                        <el-input v-model="editForm.nickName" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="">
                        <el-input v-model="editForm.email"  auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="电话号码" prop="">
                        <el-input type="number" v-model="editForm.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="重置密码">
                        <el-input v-model="passWord"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer" style="text-align:right;">
                    <!-- <el-button :type="buttonColor" @click.native="reset_passwords(editForm.childUserId)" :loading="editLoading">重置密码</el-button> -->
                    <el-button @click.native="editFormVisible = false">取消</el-button>
                    <el-button :type="buttonColor" @click.native="editSubmit(editForm.childUserId)" :loading="editLoading">提交</el-button>
                </div>
            </div>
        </el-dialog>

        <!--新增界面-->
        <el-dialog title="新增" v-show="addFormVisible" :custom-class="dialogTitleColor" @close="addFormVisible = false">
            <div slot="footer" style="text-align: left; ">
                <el-form :model="addForm" label-width="100px" :rules="addFormRules" ref="addForm">
                    <el-form-item label="用户名" prop="userName">
                        <el-input v-model="addForm.userName" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称" prop="nickName">
                        <el-input v-model="addForm.nickName" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码" prop="phone">
                        <el-input type="number" v-model="addForm.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="addForm.password"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="addForm.email"></el-input>
                    </el-form-item>
                    <el-form-item label="关联角色">
                        <el-select v-model="addForm.roleList" multiple placeholder="请选择">
                            <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="用户属性选择">
                        <el-radio-group v-model="addForm.authType">
                            <!-- <el-radio label="0">客户</el-radio> -->
                            <el-radio label="1">员工</el-radio>
                            <el-radio label="2">维修</el-radio>
                        </el-radio-group>
                    </el-form-item>

                </el-form>
            </div>
            <div slot="footer" class="dialog-footer" style="text-align: right;">
                <el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button :type="buttonColor" @click.native="addSubmit" :loading="addLoading">提交</el-button>
            </div>
        </el-dialog>

        <!--权限编辑界面-->
        <el-dialog title="权限编辑" v-show="editexentble" :custom-class="dialogTitleColor" @close="editexentble = false">
            <div slot="footer" style="text-align: left; ">

                <el-transfer v-model="editrole.roleList" :titles="['未选中', '选中']" :data="userlists" style="margin-left:30px;padding-bottom:20px;"></el-transfer>

            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editexentble = false">取消</el-button>
                <el-button :type="buttonColor" @click.native="editSubmitrole" :loading="editLoading">提交</el-button>
            </div>
        </el-dialog>

        <!-- 验证码界面 -->
        <el-dialog title="删除" v-show="delVisible" v-model="delVisible" :custom-class="dialogTitleColor" @close="delVisible=false">
            <div slot="footer" style="text-align: left; ">
                <el-form @submit.native.prevent :model="verifyCode" label-width="100px" :rules="codeRules" ref="code">
                    <el-form-item prop="code" label="验证码">
                        <el-input v-model="verifyCode.code" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer" style="text-align: right;">
                    <el-button type="success" @click.native="codeadd">获取验证码</el-button>
                    <el-button @click.native="delVisible = false">取消</el-button>
                    <el-button :type="buttonColor" @click.native="delclick" :loading="addLoading">提交</el-button>
                </div>
            </div>
        </el-dialog>
    
    </section>
</template>

<script>
    import {
        company_get_my,
        company_update_my,
        device_upgrade_query,
        user_role_query_child_user,
        query_user,
        user_edit_child_role,
        user_query,
        user_delete_child,
        user_get_childr,
        user_edit_child,
        user_reset_child_pass,
        user_add_child,
        send_auth_pass_code,
        user_enable,
        user_disable
    } from '../../api/api';
    export default {
        data() {
            const generateDatas = _ => {
                const data = [];
                let para = {
                    pageNo: 1,
                    pageSize: 1000
                };
                //NProgress.start();
                query_user(para).then((res) => {
                   
                     this.begCode(res.code,res.message);
                    // this.total = res.data.totalCount;
                    if (res.code == 0) {
                        for (let i in res.data.list) {
                            data.push({
                                key: res.data.list[i].id,
                                label: res.data.list[i].name
                            });
                        }
                    } else {
                        this.$router.push({
                            path: '/login'
                        });
                    }
                    //NProgress.done();
                });
                return data;
            };
            const defaultWorktime = ()=>{
                let date = new Date()
                let hour = date.getHours()
                let min = date.getMinutes()
                let second = date.getSeconds()
                return hour +':' + min + ':'+ second
            };
            return {
                custom_version: this.CustomVersion(),//为0正常公有云，为1私有化定制
                user:'',
                editMycompany:false,
                listLoading:false,
                editFormVisible:false,
                addFormVisible:false,
                addLoading:false,
                delVisible:false,
                page:1,
                value1:new Date(),
                userlists: generateDatas(), 
                fileList: {
                    token: JSON.parse(localStorage.getItem('key'))
                },
                passWord:'',
                address_detail: null,
                imageUrl: '',
                editLoading: false,
                editexentble:false,//权限编辑页面
                roleList: '',
                total: 0,
                page: 1,
                verifyCode:{
                    code:'',
                },
                codeRules:{
                    code:[{
                        required: true,
                        message: '请填写验证码',
                        trigger: 'blur'
                    }],
                },
                editrole: {
                    childUserId: '',
                    roleList: [],
                },
               userlist:[],
                detailsShow:{
                    name:'',
                    title:'',
                    phone:'',
                    address:'',
                    site:'',
                    remark:'',
                    expirationTime:'',
                    videoAccount:''
                },
                form: {
                    // title:"",//平台名称
                    // expirationStatus:"1",//是否会过期, 1永不过期，0会过期。
                    // expirationTime:'',//过期时间
                    // userName: '',
                    // phone: '',
                    // email: '',
                    // weixin: '',
                    // address: '',
                    // remark: ''
                },
                //新增界面数据
                addForm: {
                    userName: '',
                    phone: '',
                    password: "",
                    email: '',
                    roleList: [],
                    password: '',
                    authType: '0'

                },
                editForm:{
                        childUserId:'',
                        userName:'',
                        nickName:'',
                        email:'',
                        phone:'',
                    },//编辑界面数据
                videoAccount:{
                    video:[{
                        name:'',
                        app_key:'',
                        app_secret:'',
                    }]
                },
                edituser: {
                    title:[{
                        required: true,
                        message: '请输入平台名称',
                        trigger: 'blur'
                    },{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }],
                    name: [{
                        required: true,
                        message: '请输入组织名',
                        trigger: 'blur'
                    },{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }],
                    phone: [{
                        required: true,
                        message: '请输入电话号码',
                        trigger: 'blur'
                    }],
                    email: [{
                        required: true,
                        message: '请输入邮箱',
                        trigger: 'blur'
                    }],

                },
                addFormRules: {
                    password:[{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }],
                    userName: [{
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur'
                    },{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }],
                    nickName: [{
                        required: true,
                        message: '请输入昵称',
                        trigger: 'blur'
                    },{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }],
                    phone: [{
                        required: true,
                        message: '请输入手机号码',
                        trigger: 'blur'
                    },  {
                    pattern: /^((1[3589][0-9])|(14[57])|(17[03678])|(19[7]))\d{8}$/,
                    message: "请填写正确手机号码",
                    trigger: "blur"
                    }]
                },
                editFormRules:{
                    userName: [{
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur'
                    },{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }],
                    nickName: [{
                        required: true,
                        message: '请输入昵称',
                        trigger: 'blur'
                    },{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }],
                },
                userId:'',
                filters:{
                    name:"",
                    phone:""
                },
                pointMap:'',//地图实例对象
                styleOptions: {
                    strokeColor: "red",    //边线颜色。
                    fillColor: "red",      //填充颜色。当参数为空时，圆形将没有填充效果。
                    strokeWeight: 3,       //边线的宽度，以像素为单位。
                    strokeOpacity: 0.2,    //边线透明度，取值范围0 - 1。
                    fillOpacity: 0.1,      //填充的透明度，取值范围0 - 1。
                    strokeStyle: 'solid' //边线的样式，solid或dashed。
                },
                colorlist:[{
                    id: 1,
                    color: "#1af3fa"
                },{
                    id: 2,
                    color: "#1afa29"
                },{
                    id: 3,
                    color: "#eb910e"
                },{
                    id: 4,
                    color: "#ffd000"
                },{
                    id: 5,
                    color: "#eccc68"
                },{
                    id: 6,
                    color: "#ff7f50"
                },{
                    id: 7,
                    color: "#ff6b81"
                },{
                    id: 8,
                    color: "#ffa502"
                },{
                    id: 9,
                    color: "#ff6348"
                },{
                    id: 10,
                    color: "#ff4757"
                },{
                    id: 11,
                    color: "#7bed9f"
                },{
                    id: 12,
                    color: "#70a1ff"
                },{
                    id: 13,
                    color: "#5352ed"
                },{
                    id: 14,
                    color: "#2ed573"
                },{
                    id: 15,
                    color: "#1e90ff"
                },{
                    id: 16,
                    color: "#3742fa"
                }],
                morningtime: [defaultWorktime(),defaultWorktime()],//上午上班时间
                afternoontime: [defaultWorktime(),defaultWorktime()],//下午上班时间
                workrange:[],//电子围栏经纬度点数组
                drawingManager:''
            }
        },
        computed:{
            buttonColor(){
                return this.$store.state.buttonColor
            },
            titleColor(){
                return this.$store.state.titleColor
            },
            dialogTitleColor(){
                return this.$store.state.dialogTitleColor
            },
        },
        methods: {
            // 切换围栏颜色
            changeColor(color){
                console.log(this.morningtime)
                console.log(this.afternoontime)
                this.styleOptions.strokeColor = color
                this.styleOptions.fillColor = color
            },
            //显示地图
            map() {
                console.log(this.form);
                var th = this;
                var that = this;
                let self = this;
                this.pointMap = new BMap.Map(this.$refs.allmap);;
                // 创建Map实例
                // map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);
                var poi
                if(this.form.longitude && this.form.latitude){
                    poi = new BMap.Point(this.form.longitude, this.form.latitude);
                }else{
                    poi = new BMap.Point(114.753297, 23.795719);
                }   
                this.pointMap.addControl(new BMap.NavigationControl());
                this.pointMap.enableScrollWheelZoom(poi, 5);
                // let pt1 = new BMap.Point(
                //     this.form.longitude,
                //     this.form.latitude
                // );
                // let rangePointlist = []//接口拉的多边形点数组
                // if(this.workrange.length>0){
                //     for(let i in this.workrange){
                //         rangePointlist.push(new BMap.Point(this.workrange[i].lng,this.workrange[i].lat))
                //     }
                // }
                // var polygon = new BMap.Polygon(rangePointlist, this.styleOptions);  //创建多边形
                // let marker1 = new BMap.Marker(pt1);
                // this.pointMap.addOverlay(marker1);
                // this.pointMap.addOverlay(polygon);        //增加多边形
                // this.pointMap.centerAndZoom(poi, 15);
                
                //  //实例化鼠标绘制工具
                // let that = this            
                // this.drawingManager = new BMapLib.DrawingManager(this.pointMap, {
                //     isOpen: false, //是否开启绘制模式
                //     // enableDrawingTool: false, //是否显示工具栏
                //     drawingToolOptions: {
                //         anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
                //         offset: new BMap.Size(5, 5), //偏离值
                //     },
                //     polygonOptions: that.styleOptions, //多边形的样式
                // });
                // //添加鼠标绘制工具监听事件，用于获取绘制结果
                // var overlaycomplete = function (e) {
                //     console.log(e)
                //     console.log(e.overlay.Mo)
                //     console.log(e.overlay.Mo[0].lat)
                //     let pointlist = e.overlay.Mo
                //     for(let i in pointlist){
                //         that.workrange.push(pointlist[i])
                //     }
                //     console.log(that.workrange);
                //     // overlays.push(e.overlay);
                //     that.drawingManager.close();
                //     // console.log(this.drawingManager.getDrawingMode())
                // };
                // this.drawingManager.addEventListener('overlaycomplete', overlaycomplete);

                var ac = new BMap.Autocomplete( //建立一个自动完成的对象
                    {
                        "input": "suggestId",
                        "location": that.pointMap
                    })
                var myValue
                ac.addEventListener("onconfirm", function (e) { //鼠标点击下拉列表后的事件
                    var _value = e.item.value;
                    myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
                    self.address_detail = myValue;
                    self.form.address = myValue;
                    setPlace();
                });
                function setPlace() {
                    that.pointMap.clearOverlays(); //清除地图上所有覆盖物
                    function myFun() {
                        th.userlocation = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
                        th.pointMap.centerAndZoom(th.userlocation, 18);
                        th.pointMap.addOverlay(new BMap.Marker(th.userlocation)); //添加标注

                        self.form.longitude = th.userlocation.lng;
                        self.form.latitude = th.userlocation.lat;
                        console.log(th.userlocation)
                    }
                    var local = new BMap.LocalSearch(that.pointMap, { //智能搜索
                        onSearchComplete: myFun
                    });
                    local.search(myValue);

                    //测试输出坐标（指的是输入框最后确定地点的经纬度）
                    that.pointMap.addEventListener("click", function (e) {
                        //经度
                        console.log(th.userlocation.lng);
                        //维度
                        console.log(th.userlocation.lat);

                    })
                }
                that.pointMap.addEventListener("click", function (e) {
                    that.pointMap.clearOverlays()
                    //    alert(JSON.stringify(e.point))
                    let pt = new BMap.Point(
                        e.point.lng,
                        e.point.lat
                    );
                    self.form.longitude = e.point.lng;
                    self.form.latitude = e.point.lat;
                    let marker = new BMap.Marker(pt);
                    that.pointMap.addOverlay(marker);
                    var geoc = new BMap.Geocoder();
                    let addComp, address;
                    geoc.getLocation(e.point, function (rs) {
                        addComp = rs.addressComponents;

                        self.form.province = addComp.province;
                        self.form.city = addComp.city;
                        self.form.county = addComp.district;
                        address = addComp.province + addComp.city + addComp.district + addComp.street +
                            addComp.streetNumber;

                        self.form.address = address;

                    });
                });
            },
            //开启地图画范围的功能
            drawRange(type) {
                this.workrange = []
                this.pointMap.clearOverlays()
                this.drawingManager.open();
                this.drawingManager.setDrawingMode(BMAP_DRAWING_POLYGON);
            },
            handleAvatarSuccess(res, file) {
                console.log(file.type);
                this.imageUrl = res.data.path;
                // this.form.devicePictureList[0].path = res.data.path;
            },
            beforeAvatarUpload(file) {
                console.log(file)
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isGIF = file.type === 'image/gif';
                let tp = false;
                if (isJPG) {
                    tp = isJPG;
                } else if (isPNG) {
                    tp = isPNG
                } else if (isGIF) {
                    tp = isGIF
                } else {

                }
                const isLt2M = file.size / 1024 / 1024 < 1;
                if (!isJPG && !isPNG && !isGIF) {
                    this.$message.error('上传头像图片只能是 JPG,GIF,PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 1MB!');
                }
                return tp && isLt2M;
            },

             exentEdit(index,row) {
                this.editrole.roleList=[];
                this.editexentble = true;
                let para1 = {
                    childUserId: row.userId
                }
                console.log(para1)
                user_role_query_child_user(para1).then((res) => {
                    console.log(res)
                     this.begCode(res.code,res.message);
                    this.editrole.childUserId = row.userId;
                    for (let i in res.data.list) {
                        this.editrole.roleList.push(res.data.list[i].id);
                    }
                    console.log(res)
                })
            },//显示权限页面
            editSubmitrole(){
                this.$confirm('确认提交吗？', '提示', {}).then(() => {
                    this.editLoading = true;
                    //NProgress.start();
                    let para = this.editrole;
                    console.log(para)
                    user_edit_child_role(para).then((res) => {
                         this.begCode(res.code,res.message);
                        if (res.code == 0) {
                            this.editLoading = false;
                            //NProgress.done();
                            this.$message({
                                message: '提交成功',
                                type: 'success'
                            });
                            this.editexentble = false;
                            this.getUsers();

                        }
                    });
                });
            },//权限页面的确认

            getdata(date) {

				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				m = m < 10 ? ('0' + m) : m;
				var d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				var h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				var minute = date.getMinutes();
				minute = minute < 10 ? ('0' + minute) : minute;
				var second = date.getSeconds();
				second = second < 10 ? ('0' + second) : second;
				return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;

			},
            // second1(){
            //     this.form.expirationTime = this.getdata(this.value1)
            //     // console.log(this.form.expirationTime)  
            //     console.log(this.form.expirationTime)
            // },
            // second2(){
            //      this.form.expirationTime = ""
            // },
            getUsers() {
                let para = {
                    pageNo: this.page,
                    pageSize: 10,
                };
                company_get_my(para).then((res) => {
                    console.log(res)
                    if (res.code == 0) {
                        this.editLoading = false;
                        //NProgress.done();
                        if(res.data){
                        
                        this.form = res.data;
                        this.imageUrl = res.data.logo;
                        // this.editrole.childUserId = res.data.companyId
                        this.detailsShow.name = res.data.name
                        this.detailsShow.title = res.data.title
                        this.detailsShow.address = res.data.address
                        this.detailsShow.phone = res.data.phone
                        this.detailsShow.site = res.data.site
                        this.detailsShow.remark = res.data.remark
                        this.detailsShow.expirationTime = res.data.expirationTime
                         if(res.data.attr2){
                            this.videoAccount = JSON.parse(res.data.attr2);
                            
                            this.detailsShow.videoAccount = this.videoAccount.video[0].name
                            console.log(this.videoAccount);
                            // console.log(this.detailsShow.videoAccount);
                         }
                        }
                        if(!this.form.expirationTime){
                            this.detailsShow.expirationTime = "永不过期"
                        }
                        if(this.form.attr1){
                            let time = JSON.parse(this.form.attr1)
                            this.morningtime = time.moriningWorkTime
                            this.afternoontime = time.afternoonWorkTime
                        }
                        if(this.form.attr3){
                            let point = JSON.parse(this.form.attr3)
                            this.workrange = point[0].range
                            this.styleOptions = point[0].styleOptions
                            //还未上线的时候styleOptions在线上的项目有设置参数，这里强行改回默认，如果全部更换完毕下面两行可以删除
                            this.styleOptions.strokeOpacity = '0.2'
                            this.styleOptions.fillOpacity = '0.1'
                        }
                        this.getStaff()
                        // this.map();
                        // this.form.phone = res.data.phone;

                        // this.form.email = res.data.email;

                        // this.form.weixin = res.data.weixin;

                        // this.form.address = res.data.address;

                        // this.form.remark = res.data.remark;

                    }
                });
            },
            getStaff(){
                let para = {
                    pageNo: this.page,
                    pageSize: 10,
                    companyId: this.form.companyId,
                    userName: this.filters.name,
                    phone: this.filters.phone
                };
                user_query(para).then((res) => {
                    console.log(res)
                    this.pageNo = res.data.pageNo;
                    this.total = res.data.totalCount;
                    this.userlist = res.data.list
                //     for (let i in this.userlist){
                //        if(this.userlist[i].authType == 0){
                //            this.userlist[i].authType = '管理员'
                //        }
                //        if(this.userlist[i].authType == 1){
                //            this.userlist[i].authType = '员工'
                //        }
                //        if(this.userlist[i].authType == 2){
                //            this.userlist[i].authType = '维修员'
                //        }
                //        if(this.userlist[i].authType == 3){
                //            this.userlist[i].authType = '消费端用户'
                //        }
                //    }
                })
            },
            onSubmit() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            
                            this.editLoading = true;
                            //NProgress.start();
                            this.form.logo = this.imageUrl;
                            this.form.attr2 = JSON.stringify(this.videoAccount);
                            let worktime = {moriningWorkTime: this.morningtime,afternoonWorkTime: this.afternoontime}
                            this.form.attr1 = JSON.stringify(worktime)
                            let pointRange = [{range:this.workrange,styleOptions: this.styleOptions}]
                            this.form.attr3 = JSON.stringify(pointRange)
                            let para = Object.assign({}, this.form);
                            // console.log(para)
                            company_update_my(para).then((res) => {
                                // console.log(res)
                                if (res.code == 0) {
                                    this.editLoading = false;
                                    //NProgress.done();
                                    this.$message({
                                        message: '提交成功',
                                        type: 'success'
                                    });
                                    this.editMycompany = false
                                    this.getUsers();
                                    
                                    this.$emit('fatherMethod')
                                }
                            });
                        }); 
                    }
                })
            },
            handleEdit:function(index,row) {
                console.log(row)
            this.editFormVisible = true
            
            let para = {
                childUserId:row.userId
            }
            user_get_childr(para).then((res) => {
                this.begCode (res.code);
                if (res.code == 0) {
                    this.editForm = {
                        childUserId:row.userId,
                        userName:res.data.userName,
                        nickName:res.data.nickName,
                        email:res.data.email,
                        phone:res.data.phone,
                        }
                }
                console.log(res.data)
                // console.log(this.editForm)
            })
        },//编辑
            handleDel:function(index,row) {
                this.delVisible = true;
                this.userId = row.userId
                          
            // this.$confirm('确认删除吗?', '提示', {
            //         type: 'warning'
            //     }).then(() => {

            //         // this.listLoading = true;
                   
            //         let para = {
            //             childUserId: row.userId
            //         };
            //        console.log(para)
            //        user_delete_child(para).then((res) => {
            //            this.listLoading = false;
            //            this.$message({
            //                     message: '删除成功',
            //                     type: 'success'
            //                 });
            //             this.getUsers();
            //        })
            //     }).catch(() => {

            //     });
            },//删除
            editSubmit: function(s) {
            this.$refs.editForm.validate((valid) => {
                if(valid){
                this.listLoading = true
                this.editLoading = true;
                let para = this.editForm

                console.log(para)
                user_edit_child(para).then((res) => {
                    this.listLoading = false
                    this.editLoading = false;
                    this.begCode(res.code, res.message);
                    if (res.code == 0) {
                        if(this.passWord != ""){
                            this.reset_passwords(s)
                        }else{
                            this.$message({
                                message: '提交成功',
                                type: 'success'
                            });
                            this.editFormVisible = false;                       
                            this.getUsers();
                        }
                        } else {
                            this.$message({
                                message: res.message,
                                type: 'warning'
                            });
                                    }
                    // console.log(res)
                })
                }
            })
            },
            reset_passwords(s) {
                this.$confirm('确认重置密码吗?', '提示', {
                        type: 'warning'
                    }).then(() => {
                        //NProgress.start();
                        if (this.passWord.length < 6) {
                            this.$message({
                                message: '修改的密码最小为6位',
                                type: 'warning'
                            });
                            return false;
                        }
                        this.editLoading = true;
                        let para = {
                            childUserId: s,
                            passWord: this.passWord
                        };
                        console.log(para)
                        user_reset_child_pass(para).then((res) => {
                            // console.log(res)
                            this.begCode(res.code,res.message);
                            if (res.code == 0) {
                                this.listLoading = false;
                                //NProgress.done();
                                this.$message({
                                    message: '重置密码成功',
                                    type: 'success'
                                });

                                this.editFormVisible = false;
                                this.editLoading = false;
                                this.getUsers();

                            }
                        });
                    }).catch(() => {

                    });
            },
            editcompany() {
                this.editMycompany = true;
                this.map();
                this.getUsers();
            },
            indexMethod(index) {
                let num = (this.page - 1) * 10 + index + 1;
                return num;
            },
            selsChange: function (sels) {
            this.sels = sels;
            },
            handleAdd(){
                this.addFormVisible = true;
                this.addForm = {
                    userName: '',
                    phone: '',
                    password: "",
                    email: '',
                    roleList: [],
                    password: '',
                    authType: '0'
                };
                
            },
            //新增
            addSubmit: function () {
                this.$refs.addForm.validate((valid) => {
                    
                    if (valid) {
                        if(!this.addForm.userName){
                            this.$message({
                                        message: '请填写用户名',
                                        type: 'warning'
                                    });
                                    return false;
                        }
                        if(!this.addForm.phone){
                            this.$message({
                                        message: '请填写手机号码',
                                        type: 'warning'
                                    });
                                    return false;
                        }
                        console.log(valid)
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.addLoading = true;
                            //NProgress.start();
                            for (var i in this.addForm.roleList) {
                                this.addForm.roleList[i] = parseInt(this.addForm.roleList[i]);
                            }
                            let para = Object.assign({}, this.addForm);
                            console.log(para)
                            user_add_child(para).then((res) => {
                                
                                this.begCode(res.code, res.message);
                                if (res.code == 0) {
                                    this.$message({
                                        message: '提交成功',
                                        type: 'success'
                                    });
                                    this.$refs['addForm'].resetFields();
                                    this.addFormVisible = false;
                                    this.getUsers();
                                }
                                this.addLoading = false;
                                //NProgress.done();

                            });
                        });
                    }
                });
            },
            handleCurrentChange(val) {
                this.page = val;
                this.getStaff()
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.getStaff()
            },
            codeadd() {                      
                send_auth_pass_code().then((res) => {
                    this.begCode(res.code, res.message);
                    //NProgress.done();
                    if (res.code == 0) {
                        this.$message({
                            message: '发送成功,请耐心等待',
                            type: 'success'
                        });
                    }
                });
            },
            //删除
            delclick(){     
                if(!this.verifyCode.code){
                    this.$message({
                            message: '请输入验证码',
                            type: 'warning'
                        });
                        return false;
                }
                let para = {
                    childUserId: this.userId,
                    verifyCode:this.verifyCode.code
                };
                user_delete_child(para).then((res) => {
                    this.begCode(res.code,res.message);
                    if (res.code == 0) {

                        this.delVisible = false;
                        this.verifyCode='';
                        //NProgress.done();
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.getUsers();
                    }
                });
            },
            // 角色启用禁用
             stateput(s) {
                let para = {
                    idList: [s.userId]
                }
                console.log(s.status);
                if (s.status == 2) {
                    user_enable(para).then((res) => {
                         this.begCode(res.code,res.message);
                        if (res.code == 0) {
                            this.$message({
                                message: '启用成功',
                                type: 'success'
                            });
                            this.getUsers();
                        }
                    });
                } else {
                    user_disable(para).then((res) => {
                         this.begCode(res.code,res.message);
                        if (res.code == 0) {
                            //NProgress.done();
                            this.$message({
                                message: '停用成功',
                                type: 'success'
                            });
                            this.getUsers();
                        }
                    });
                }
            },
            dendrogram(){
                // console.log(row.companyId)
                sessionStorage.setItem('dendrogram_detail',this.form.companyId)
                this.$router.push({
                    path:'/company/companyTree'
                })
            }
        },
        mounted() {
            this.menubt = localStorage.getItem('menubt')
            this.getUsers();
            this.user = JSON.parse(sessionStorage.getItem("user"))
            let para = {
                pageNo: 1,
                pageSize: 1000
            };
            this.listLoading = true;
           
            query_user(para).then((res) => {
                 this.begCode(res.code,res.message);
                
                this.roleList = res.data.list;
                this.listLoading = false;
                
            });
            
        }
    }
</script>
<style>
    #allmap{
        height: 500px;
        /* width: 820px; */
        width: 95%;
    }
    .tangram-suggestion-main {
        z-index: 9999999999;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    .device_title{
        border-bottom: 1px solid #ccc;
        margin-bottom: 5px;
    }
    .device_title .ng-binding{
        font-weight: bold;
        font-size: 20px;
    }
    .device_imgs{
        width: 400px;
        height: 300px;
        margin: 0 auto;
    }
    .device_imgs img{
        max-width: 100%;
        max-height: 100%;  
    } 
    .userlists{
        /* font-size: 20px; */
        font-size: 14px;
        font-weight: bold;
        padding-left: 10px;
    }
    .colorsel{
        display: inline-block;
        width: 20px;
        height: 20px;
        /* background-color: red; */
        /* margin-top: 10px; */
        margin: 10px 2px;
        cursor: pointer;
        border-radius: 5px;
    }
    .group-border{
        border: 1px solid #E5E5E5;
    }
    .group-title{
        width: 9%;
        padding: 10px 0;
        padding-left: 20px;
        font-size: 14px;
        background-color: #FAFAFA;
    }
    .group-text{
        width: 22%;
        padding: 10px 0;
        padding-left: 20px;
        font-size: 14px;
    }
    .profile-edit-group{
        width:49%;
        display:inline-block;
    }
</style>